<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
        元素之间的关系：
            父元素：直接包含子元素的元素
            子元素：直接被父元素包含的元素
            祖先元素：直接或间接包含后代元素的元素
            后代元素：直接或间接被祖先元素包含的元素
            兄弟元素：拥有相同父元素的叫兄弟元素
    -->

    <style type="text/css">
        /*
            1. 为div的id为d1的span元素设置一个颜色为greenyellow
            后代元素选择器：
                选中指定元素的指定后代元素
            语法：
                祖先元素 后代元素{}
        */
        #d1 span {
            color: greenyellow;
        }

        /*
            选中id为d1的div中的p元素中的span元素
        */
        #d1 p span {
            background-color: yellowgreen;
        }

        /*
            2. 为div的子元素span设置一个字体大小为32px

            子元素选择器：
                选中指定父元素的指定子元素
            语法：
                父元素 > 子元素
        */
        div > span {
            font-size: 32px;
        }

    </style>
</head>
<body>
    <div id="d1">
        <span>我是div标签中的span</span>
        <p>
            <span>我是p标签中的span</span>
        </p>
    </div>

    <span>我是body中的span标签</span>
</body>
</html>